import React from 'react';
import { __ } from '@poemkit/components/_utils/_all';
import { Slideshow, SlideshowItem } from '@poemkit/components/Slideshow/index.tsx';

//Create or Remove Sidebar Menu
import { SidebarMenu } from '@poemkit/pages/ComponentsDemo/_SidebarMenu.js';

//get project config
import { rootDirectory } from '@poemkit/config/websiteConfig.js';


export default () => {

	React.useEffect(() => { // Equivalent to componentDidMount and componentDidUpdate:
		
		__( document ).ready( function() {
			//Create sidebar menu
	        SidebarMenu();
		});  
	});

    return (
	  <>
		 
		{/*<!-- Content 
		====================================================== -->*/}
		<section>
			<div className="container">
				<div className="row">
					<div className="col-12">
						<h1 className="poemkit-typo--h2">
							Slideshow 
							<a className="poemkit-typo--h3 align-middle" href="https://github.com/xizon/poemkit/tree/main/src/client/components/Slideshow" target="_blank"><span className="poemkit-dir--right" style={{fontSize:"0.75rem",color: "#ababab",margin:".5rem .5rem 0 0"}}><svg style={{marginRight:".5rem"}} width="16" viewBox="0 0 122.88 91.26"><path fill="#d2d2d2" d="M8.32,0h106.24c4.58,0,8.32,3.74,8.32,8.32v74.62c0,4.57-3.74,8.32-8.32,8.32H8.32C3.74,91.26,0,87.51,0,82.94 V8.32C0,3.74,3.74,0,8.32,0L8.32,0z M54.46,72.22L32,58.61v-8.63l22.46-13.61v10.26l-13.65,7.69l13.65,7.7V72.22L54.46,72.22z M68.42,72.22l22.46-13.61v-8.63L68.42,36.37v10.26l13.65,7.69l-13.65,7.7V72.22L68.42,72.22z M117.97,23.29H5.29v60.46 c0,0.64,0.25,1.2,0.67,1.63c0.42,0.42,0.99,0.67,1.63,0.67h108.04c0.64,0,1.2-0.25,1.63-0.67c0.43-0.43,0.67-0.99,0.67-1.63V23.29 H117.97L117.97,23.29z M106.64,9.35c2.27,0,4.11,1.84,4.11,4.11c0,2.27-1.84,4.11-4.11,4.11c-2.27,0-4.11-1.84-4.11-4.11 C102.54,11.19,104.38,9.35,106.64,9.35L106.64,9.35z M78.8,9.35c2.27,0,4.11,1.84,4.11,4.11c0,2.27-1.84,4.11-4.11,4.11 c-2.27,0-4.11-1.84-4.11-4.11C74.69,11.19,76.53,9.35,78.8,9.35L78.8,9.35z M92.72,9.35c2.27,0,4.11,1.84,4.11,4.11 c0,2.27-1.84,4.11-4.11,4.11c-2.27,0-4.11-1.84-4.11-4.11C88.61,11.19,90.45,9.35,92.72,9.35L92.72,9.35z"/></svg>Docs on GitHub</span></a>
						</h1>
					</div>
				</div>
				{/*<!-- .row end -->*/}

			</div>
			{/*<!-- .container end -->*/}

		</section>



		{/*<!-- Content 
		====================================================== -->*/}
		<section className="poemkit-spacing--s">
			<div className="container">
				<div className="row">
					<div className="col-12">
						<h3 className="app-header-title">Scale Effect</h3>
						<hr />


					</div>
				</div>
				{/*<!-- .row end -->*/}

			</div>
			{/*<!-- .container end -->*/}

		</section>



		{/*<!-- Content 
		====================================================== -->*/}
		<Slideshow 
		    effect="scale"
            auto={true}
			loop={true}
            timing={10000}
            paginationEnabled={true}
            arrowEnabled={true}
            arrowPrevIcon={<><i className="fa fa-long-arrow-left" aria-hidden="true"></i></>}
            arrowNextIcon={<><i className="fa fa-long-arrow-right" aria-hidden="true"></i></>}
            draggable={false}
            draggableCursor="move">
				
		    <SlideshowItem url={`${rootDirectory}/assets/images/demo/cool-slider-1.jpg`}>
				<div className="poemkit-typo--color-white">
					<h3>Beautiful Free &amp; Premium Responsive WordPress Themes</h3>
					<p>Responsive Web UI Frameworks</p>
					<a href="#" className="poemkit-btn poemkit-btn__border--thin poemkit-btn__margin--b poemkit-btn__size--s poemkit-btn__bg--secondary is-pill is-fill-white">Link To</a>
				</div>
			</SlideshowItem>
		    <SlideshowItem url={`${rootDirectory}/assets/images/demo/cool-slider-2.jpg`}>
				<div className="poemkit-typo--color-white">
					<h3>Hello World</h3>
					<p>UIUX Lab carefully crafts original design assets and publishes articles about UI/UX trends!</p>
					<a href="#" className="poemkit-btn poemkit-btn__border--thin poemkit-btn__margin--b poemkit-btn__size--s poemkit-btn__bg--secondary is-pill is-fill-white">Link To</a>
				</div>
			</SlideshowItem>
		    <SlideshowItem url={`${rootDirectory}/assets/images/demo/cool-slider-3.jpg`}>
				<div className="poemkit-typo--color-white">
					<h3>Title 3</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
				</div>
			</SlideshowItem>
		    <SlideshowItem url={`${rootDirectory}/assets/videos/1920x1080/demo.mp4`}></SlideshowItem>

		</Slideshow>


		{/*<!-- Content 
		====================================================== -->*/}
		<section className="poemkit-spacing--s">
			<div className="container">
				<div className="row">
					<div className="col-12">
						<h3 className="app-header-title">Sliding Effect</h3>
						<hr />

					</div>
				</div>
				{/*<!-- .row end -->*/}

			</div>
			{/*<!-- .container end -->*/}

		</section>



		{/*<!-- Content 
		====================================================== -->*/}
		<Slideshow 
		    effect="slide"
            auto={false}
			loop={false}
            timing={10000}
            paginationEnabled={true}
            arrowEnabled={false}
            arrowPrevIcon={<><i className="fa fa-long-arrow-left" aria-hidden="true"></i></>}
            arrowNextIcon={<><i className="fa fa-long-arrow-right" aria-hidden="true"></i></>}
            draggable={false}
            draggableCursor="move">
				
		    <SlideshowItem url={`${rootDirectory}/assets/images/demo/cool-slider-1.jpg`}>
				<div className="poemkit-typo--color-white">
					<h3>Beautiful Free &amp; Premium Responsive WordPress Themes</h3>
					<p>Responsive Web UI Frameworks</p>
					<a href="#" className="poemkit-btn poemkit-btn__border--thin poemkit-btn__margin--b poemkit-btn__size--s poemkit-btn__bg--secondary is-pill is-fill-white">Link To</a>
				</div>
			</SlideshowItem>
		    <SlideshowItem url={`${rootDirectory}/assets/images/demo/cool-slider-2.jpg`}>
				<div className="poemkit-typo--color-white">
					<h3>Hello World</h3>
					<p>UIUX Lab carefully crafts original design assets and publishes articles about UI/UX trends!</p>
					<a href="#" className="poemkit-btn poemkit-btn__border--thin poemkit-btn__margin--b poemkit-btn__size--s poemkit-btn__bg--secondary is-pill is-fill-white">Link To</a>
				</div>
			</SlideshowItem>
		    <SlideshowItem url={`${rootDirectory}/assets/images/demo/cool-slider-3.jpg`}>
				<div className="poemkit-typo--color-white">
					<h3>Title 3</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
				</div>
			</SlideshowItem>
		</Slideshow>

		


		{/*<!-- Content 
		====================================================== -->*/}
		<section className="poemkit-spacing--s">
			<div className="container">
				<div className="row">
					<div className="col-12">
						<h3 className="app-header-title">Fade Effect</h3>
						<hr />


					</div>
				</div>
				{/*<!-- .row end -->*/}

			</div>
			{/*<!-- .container end -->*/}

		</section>



		{/*<!-- Content 
		====================================================== -->*/}
		<Slideshow 
		    effect="fade"
            auto={false}
			loop={false}
            timing={10000}
            paginationEnabled={true}
            arrowEnabled={true}
            arrowPrevIcon={<><i className="fa fa-long-arrow-left" aria-hidden="true"></i></>}
            arrowNextIcon={<><i className="fa fa-long-arrow-right" aria-hidden="true"></i></>}
            draggable={true}
            draggableCursor="move">
				
		    <SlideshowItem url={`${rootDirectory}/assets/images/demo/cool-slider-1.jpg`}>
				<div className="poemkit-typo--color-white">
					<h3>Beautiful Free &amp; Premium Responsive WordPress Themes</h3>
					<p>Responsive Web UI Frameworks</p>
					<a href="#" className="poemkit-btn poemkit-btn__border--thin poemkit-btn__margin--b poemkit-btn__size--s poemkit-btn__bg--secondary is-pill is-fill-white">Link To</a>
				</div>
			</SlideshowItem>
		    <SlideshowItem url={`${rootDirectory}/assets/images/demo/cool-slider-2.jpg`}>
				<div className="poemkit-typo--color-white">
					<h3>Hello World</h3>
					<p>UIUX Lab carefully crafts original design assets and publishes articles about UI/UX trends!</p>
					<a href="#" className="poemkit-btn poemkit-btn__border--thin poemkit-btn__margin--b poemkit-btn__size--s poemkit-btn__bg--secondary is-pill is-fill-white">Link To</a>
				</div>
			</SlideshowItem>
		    <SlideshowItem url={`${rootDirectory}/assets/images/demo/cool-slider-3.jpg`}>
				<div className="poemkit-typo--color-white">
					<h3>Title 3</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
				</div>
			</SlideshowItem>
		</Slideshow>


		
  
		{/*<!-- API 
		====================================================== -->*/}
		<section>
			<div className="container">
				<div className="row">
					<div className="col-12">
						<h3 className="app-header-title">API</h3>
						<hr />


						<article className="poemkit-spacing--s" itemProp="text">
							<h4>Slideshow</h4>
							<div>
								<pre>import {`{Slideshow}`} from '@poemkit/components/Slideshow/index.tsx';</pre>
							</div>

							<div className="table-responsive-md">

								<table className="table table-bordered table-striped mb-5">
									<thead>
										<tr>
											<th>Property</th>
											<th>Type</th>
											<th>Default</th>
											<th>Description</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td><code>effect</code></td>
											<td><code>scale</code> | <code>slide</code> | <code>fade</code></td>
											<td>fade</td>
											<td>Transition effects</td>
										</tr>
										<tr>
											<td><code>auto</code></td>
											<td>boolean</td>
											<td>false</td>
											<td>Setup a slideshow for the slider to animate automatically</td>
										</tr>
										<tr>
											<td><code>timing</code></td>
											<td>number</td>
											<td>10000</td>
											<td>Autoplay interval</td>
										</tr>
										<tr>
											<td><code>loop</code></td>
											<td>boolean</td>
											<td>false</td>
											<td>Gives the slider a seamless infinite loop</td>
										</tr>
										<tr>
											<td><code>paginationEnabled</code></td>
											<td>boolean</td>
											<td>false</td>
											<td>Display or hide Navigation of paging control</td>
										</tr>
										<tr>
											<td><code>arrowEnabled</code></td>
											<td>boolean</td>
											<td>false</td>
											<td>Display or hide Previous/Next arrow</td>
										</tr>
										<tr>
											<td><code>arrowPrevIcon</code></td>
											<td>ReactNode</td>
											<td>-</td>
											<td>Previous arrow icon</td>
										</tr>
										<tr>
											<td><code>arrowNextIcon</code></td>
											<td>ReactNode</td>
											<td>-</td>
											<td>Next arrow icon</td>
										</tr>
										<tr>
											<td><code>draggable</code></td>
											<td>boolean</td>
											<td>false</td>
											<td>Allow drag and drop on the slider (touch devices will always work)</td>
										</tr>
										<tr>
											<td><code>draggableCursor</code></td>
											<td>string | boolean</td>
											<td>move</td>
											<td>Drag &amp; Drop Change icon/cursor while dragging</td>
										</tr>
									</tbody>
								</table>




							</div>

							{/*<!-- ++++++++ -->*/}

							<h4>Slideshow Item</h4>
							<div>
								<pre>import {`{SlideshowItem}`} from '@poemkit/components/Slideshow/index.tsx';</pre>
							</div>


							<div className="table-responsive-md">

								<table className="table table-bordered table-striped mb-5">
									<thead>
										<tr>
											<th>Property</th>
											<th>Type</th>
											<th>Default</th>
											<th>Description</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td><code>url</code></td>
											<td>string</td>
											<td>-</td>
											<td>Specify URL each item. Support image and video</td>
										</tr>
									</tbody>
								</table>

							</div>

							{/*<!-- ++++++++ -->*/}


							<p className="mb-5 alert alert-primary">If you want to modify the transition-duration property, please directly modify the <code>.poemkit-slideshow__item</code> in the CSS file. <strong>All effects are controlled by CSS styles.</strong></p>


						</article>


					</div>
				</div>
				{/*<!-- .row end -->*/}


			</div>
			{/*<!-- .container end -->*/}
		</section>




      </>
    );
};